const ul = document.querySelector('.zy-tab-nav ul')
ul.addEventListener('click', function (e) {
    console.log(e.target.tagName);
    if (e.target.tagName === 'A') {
        document.querySelector('.zy-tab-nav .active').classList.remove('active')
        e.target.classList.add('active')
        const i = +e.target.dataset.id
        document.querySelector('.zy-tab-content .active').classList.remove('active')

    }
})
const sliderData = [
    {url: './images/desktop_1.jpg', title: 'text01', color: 'rgb(100, 67, 68)'},
    {url: './images/desktop_2.jpg', title: 'text02', color: 'rgb(43, 35, 26)'},
    {url: './images/desktop_3.jpg', title: 'text03', color: 'rgb(36, 31, 33)'},
    {url: './images/desktop_4.jpg', title: 'text04', color: 'rgb(139, 98, 66)'},
    {url: './images/desktop_5.jpg', title: 'text05', color: 'rgb(67, 90, 92)'},
    {url: './images/desktop_6.jpg', title: 'text06', color: 'rgb(166, 131, 143)'},
    {url: './images/desktop_7.jpg', title: 'text07', color: 'rgb(53, 29, 25)'},
    {url: './images/desktop_8.jpg', title: 'text08', color: 'rgb(99, 72, 114)'},
]
const a = document.querySelector('.slider-footer p')
const b = document.querySelector('.slider-wrapper img')
let c = 0
const d = document.querySelectorAll('.slider-indicator li')
const e = document.querySelector('.slider-footer')
const next = document.querySelector('.next')
const prev = document.querySelector('.prev')
const slider = document.querySelector('.slider')
console.log(d);
next.addEventListener('click', function () {
    c++
    if (c >= sliderData.length) {
        c = 0
    }
    for (let i = 0; i < sliderData.length; i++) {
        d[i].classList.remove('active')
    }
    d[c].classList.add('active')
    a.innerHTML = sliderData[c].title
    b.src = sliderData[c].url
    e.style.background = sliderData[c].color
})
prev.addEventListener('click', function () {
    c--
    if (c <= 0) {
        c = sliderData.length
    }
    for (let i = 0; i < sliderData.length; i++) {
        d[i].classList.remove('active')
    }
    d[c].classList.add('active')
    a.innerHTML = sliderData[c].title
    b.src = sliderData[c].url
    e.style.background = sliderData[c].color
})
let h = setInterval(function () {
    next.click()
}, 1000)
slider.addEventListener('mouseenter', function () {
    clearInterval(h)
})
slider.addEventListener('mouseleave', function () {
    h = setInterval(function () {
        next.click()
    }, 1000)
})

const pageContainer = document.getElementById("page-container");
const sunMoonToggle = document.getElementById("sun-moon-toggle");

// 为按钮绑定点击事件

// 鼠标按下事件
let isMouseDown = false;
let pageX, pageY;
pageContainer.addEventListener("mousedown", (event) => {
    isMouseDown = true;
    pageX = event.pageX;
    pageY = event.pageY;
});

// 鼠标松开事件
pageContainer.addEventListener("mouseup", () => {
    isMouseDown = false;
});

// 鼠标移动事件
pageContainer.addEventListener("mousemove", (event) => {
    if (!isMouseDown) return;
    const deltaX = event.pageX - pageX;
    const deltaY = event.pageY - pageY;
    pageContainer.style.transform += `rotateX(${deltaY * 0.5}deg) rotateY(${deltaX * -0.5
    }deg)`;
    pageX = event.pageX;
    pageY = event.pageY;
});
pageContainer.addEventListener('mouseleave', () => {
    isMouseDown = false;
})


const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 设置canvas的宽度和高度
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 粒子对象
class Particle {
    constructor(x, y, digit) {
        this.x = x;
        this.y = y;
        this.size = Math.random() * 10 + 10; // 随机大小，修改范围为10到20
        this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; // 随机颜色
        this.velocityY = Math.random() * 3 + 1; // 随机竖直速度
        this.digit = digit; // 数字
    }

    // 更新粒子的位置
    update() {
        this.y += this.velocityY;

        // 当粒子到达画布底部时，重新放置到画布顶部
        if (this.y > canvas.height) {
            this.y = 0;
        }
    }

    // 绘制粒子
    draw() {
        ctx.font = `${this.size}px Arial`;
        ctx.fillStyle = this.color;
        ctx.fillText(this.digit, this.x, this.y);
    }
}

// 创建粒子数组
const particles = [];
const numParticles = 100;

// 初始化粒子
for (let i = 0; i < numParticles; i++) {
    const x = Math.random() * canvas.width;
    const y = Math.random() * canvas.height;
    const digit = Math.floor(Math.random() * 9) + 1; // 生成1到9的数字
    particles.push(new Particle(x, y, digit));
}

// 动画循环函数
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (let i = 0; i < particles.length; i++) {
        particles[i].update();
        particles[i].draw();
    }

    requestAnimationFrame(animate);
}

// 启动动画
animate();